<!--
# Copyright (c) 2021, NVIDIA CORPORATION.  All rights reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
-->

<table class="transcript-view-table mdl-data-table mdl-js-data-table mdl-shadow--4dp">
    <thead>
    <tr>
        <th class="mdl-data-table__cell--non-numeric">Filename</th>
        <th class="mdl-data-table__cell--non-numeric">Transcript</th>
    </tr>
    </thead>
    <tbody>
    {% for transcript in transcripts %}
    <tr>
        <td class="property-value-col mdl-data-table__cell--non-numeric" style="width: 10%">
            <div class="col-value" style="overflow-x:auto;">
                {{ transcript.filename }}
            </div>
        </td>
        <td class="property-value-col mdl-data-table__cell--non-numeric">
            <div class="col-value mdl-textfield mdl-js-textfield"
                 style="width: 100%; display: block;">
          <textarea class="mdl-textfield__input" type="text" rows="2" readonly>
            {{ transcript.transcription }}
          </textarea>
            </div>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>